<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-04 10:45:07
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>Document</title>
    <style>
      .body {
        padding: 0 !important;
        overflow: hidden;
      }

      .body .table-body {
        height: 255px !important;
        overflow-y: auto;
      }

      .body .table-header .td {
        display: flex;
        align-items: center;
      }

      .body .table-body .tr {
        border: 0 !important;
        min-height: 30px !important;
      }

      .body .table-body .tr img {
        cursor: pointer;
      }

      .ghcj2 .tab_button .input-group label {
        width: 32px;
        height: 32px;
        background: #3e7bfa;
        border-radius: 0px 6px 6px 0px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="ghcj2" id="app">
      <div class="body">
        <div class="tab-group">
          <div class="tab_button">
            <div class="input-group">
              &ensp;
              <input style="width: 160px" placeholder="请输入资料名称" />
              <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
            </div>
            <div class="select-group">
              <label></label>
              <div class="options">
                <input placeholder="全部类型" style="width: 150px" />
                <ul>
                  <li>全部类型</li>
                  <li>全部类型</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="input-btn">
            <button @click="onDownloadFile" class="button_success_plain_other">
              <img src="./common/img/ghcj2/xz.png" />&ensp;下载模板
            </button>
            &ensp;&ensp;
            <button @click="onNewDemand" class="button_warning_plain">
              <img src="./common/img/ghcj2/new_document1.png" />&ensp;新建需求单
            </button>
            &ensp;&ensp;
            <button class="button_primary_plain">
              <img src="" />&ensp;传输记录
            </button>
          </div>
        </div>
        <div style="height: 420px; overflow-y: auto">
          <div class="table" v-for="item in list">
            <div
              class="table-header"
              style="cursor: pointer"
              @click="()=>{
              item.isShow = !item.isShow
            }"
            >
              <div class="tr">
                <div class="td" style="width: 98%">
                  <img
                    v-show="!item.isShow"
                    src="./common/img/xiala2.png"
                    style="margin-right: 5px"
                  />
                  <img
                    v-show="item.isShow"
                    src="./common/img/xiala2.png"
                    style="margin-right: 5px; transform: rotate(90deg)"
                  />
                  某某某某某某某某某
                </div>
                <div class="td">操作</div>
              </div>
            </div>
            <div class="table-body" v-show="item.isShow">
              <div class="tr" v-for="_item in 2">
                <div style="width: 99.5%; display: flex">
                  <div class="td" style="width: 25%">
                    <input type="checkbox" />&ensp;某某某项目资料
                  </div>
                  <div class="td" style="width: 25%">资料类型 汇报PPT</div>
                  <div class="td" style="width: 25%">创建人 某某某</div>
                  <div class="td" style="width: 25%">
                    更新时间 2022-09-24 13:55:00
                  </div>
                </div>
                <div class="td center">
                  <img
                    @click.stop="()=>{}"
                    src="./common/img/ghcj2/diandiandian.png"
                  />
                </div>
              </div>
              <div class="tr">
                <div class="td">
                  <input type="checkbox" />&ensp;
                  <button class="button_primary_text button_link">
                    上传原型地址
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <span>共 {{total}} 条</span>
          <ul>
            <li @click="shang"><i class="bi bi-chevron-left"></i></li>
            <li
              v-show="start > 0"
              @click="()=>{
                if(start > 0){
                  params.page = start;
                  end-=3
                  start-=3
                }
              }"
            >
              ...
            </li>
            <li
              @click="onCurrentPage(item)"
              v-for="item in totalPage"
              v-show="item < end && item > start"
              :class="[item == params.page ? 'active' :'']"
            >
              {{item}}
            </li>
            <li
              v-show="end <= totalPage"
              @click="()=>{
                if(end <= totalPage){
                params.page = end;
                end+=3
                start+=3
                }
              }"
            >
              ...
            </li>
            <li @click="next"><i class="bi bi-chevron-right"></i></li>
          </ul>
        </div>
      </div>
      <div id="newDemand_yik" style="height: 80vh">
        <iframe
          id="iframe"
          class="level"
          name="dialog"
          src="./项目详情（需求-设计稿需求单）.html"
          frameborder="0"
          width="100%"
          height="100%"
          allowtransparency="true"
          style="background-color: transparent"
        ></iframe>
      </div>
      <div id="newDemand_yik_next" style="height: 80vh">
        <iframe
          id="iframe"
          class="level"
          name="dialog"
          src="./项目详情（需求-设计稿需求单）next.html"
          frameborder="0"
          width="100%"
          height="100%"
          allowtransparency="true"
          style="background-color: transparent"
        ></iframe>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import { childMessage } from "./common/js/event.js";
    import DiaLog from "./common/js/diaLog.js";
    import message from "./common/js/message.js";
    const { createApp } = Vue;
    // 新建需求单弹框
    let newDemand_yik = new DiaLog({
      title: "方案设计稿需求单",
      width: "1480px",
      el: "#newDemand_yik",
      cancelText: "取消",
      confirmText: "下一步",
      cancel: () => {
        newDemand_yik.hide();
      },
      confirm: (document) => {
        const contract = document.querySelector("#iframe").contentWindow;
        let data = contract.save();
        console.log(data);
        newDemand_yik_next.show();
        // document.querySelector("#iframe").
        // newDemand_yik.hide();
      },
    });
    let newDemand_yik_next = new DiaLog({
      title: "方案设计稿需求单",
      width: "1480px",
      el: "#newDemand_yik_next",
      cancelText: "上一步",
      confirmText: "确认",
      cancel: () => {
        newDemand_yik_next.hide();
      },
      confirm: (document) => {
        newDemand_yik_next.hide();
        newDemand_yik.hide();
        // const contract = document.querySelector("#iframe").contentWindow;
        // let data = contract.save();
        // console.log(data);
        // document.querySelector("#iframe").
        // newDemand_yik.hide();
      },
    });
    let app = createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [
            {
              isShow: true,
            },
            {
              isShow: true,
            },
            {
              isShow: true,
            },
          ],
          params: {
            page: 1,
            limit: 10,
          },
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.get();
      },
      //所有函数都写在这里
      methods: {
        //成本概算审批
        onCostEstimateApproval() {
          childMessage({
            src: "./项目详情（售前-成本概算审批）.html",
            type: "page",
          });
        },
        //新建文件夹弹框
        onNewDemand() {
          newDemand_yik.show();
        },
        //上传资料弹框
        onDownloadFile() {},
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
        },
      },
    }).mount("#app");
  </script>
</html>
